<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <link th:href="@{/login/css/bootstrap1.css}" rel="stylesheet">
    <script th:src="@{/login/js/bootstrap1.js}"></script>
    <script th:src="@{/login/js/jquery.js}"></script>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        a:link{
            color:white;
            font-size: 16px;
            font-weight: 400;
            text-decoration:none;
        }
        a:visited{
            color:white;
        }
        a:hover{
            color:orange;
        }
        a:active{
            color:black;
        }
        .navItem{
            margin-right: 25px;
            line-height: 50px;
            font-size: 20px;
            float: left;
        }
        li{
            list-style: none; /*去掉前面的点*/
        }
    </style>
</head>

<body>
    <div th:fragment="topNav(type, userName)" style="background-color: #0a53be;height: 50px">
        <ul style="float: left">
            <li class="navItem" th:if="${type}=='front'">
                <a th:href="@{/admin/productList1}"><h4 style="margin-top: 10px;margin-left: -20px;">商品管理系统-前台</h4></a>
            </li>
            <li class="navItem" th:if="${type}=='back'">
                <a th:href="@{/admin/productTable1}"><h4 style="margin-top: 10px;margin-left: -20px;">商品管理系统-后端</h4></a>
            </li>
            <li class="navItem" th:if="${type}=='admin'">
                <a th:href="@{/roles}"><h4 style="margin-top: 10px;margin-left: -20px;">商品管理系统-管理员</h4></a>
            </li>
        </ul>
        <ul style="float: right">
            <li class="navItem" th:if="${type}=='front'">
                <a th:href="@{/admin/productTable1}">前台管理</a>
            </li>
            <li class="navItem" th:if="${type}=='back'">
                <a th:href="@{/admin/productList1}">后端管理</a>
            </li>
            <li class="navItem">
                <a th:href="@{/roles}" th:text="${userName}">管理员</a>
            </li>
            <li class="navItem">
                <a th:href="@{/toLogin}">退出</a>
            </li>
        </ul>
    </div>
    <div th:fragment="menu" class="col-2" style="background-color: #0dcaf0">
        <ul>
            <li>商品管理</li>
            <li>分类管理</li>
            <li>销售统计</li>
        </ul>
    </div>
</body>
</html>

<!--fragment:可以作用于任意标签,存在参数则用括号引用<head th:fragment="head(title)">，里面使用形参，-->
<!--    在实际使用处可用replace替换(可自定义标签替换)或insert插入用实际参数替换<myhead th:replace="basic/layout :: head('后台管理页面1')"></myhead>-->
<!--    弹性盒子-->
<!--    <ul style="display: flex;justify-content: space-around">-->
<!--        <li>-->
<!--            <a href="">前台页面</a>-->
<!--        </li>-->
<!--        <li>-->
<!--            <a href="">管理员</a>-->
<!--        </li>-->
<!--    </ul>-->
